<template>
  <div>
    <el-container>
      <el-header>
        <h1>个人资料填写</h1>
      </el-header>
      <el-main>
        <el-divider></el-divider>
        <div class="container">

          <el-row>
          <el-card :body-style="{ padding: '0px' }">
            <div style="padding: 20px;">
              <el-form ref="reForm1" :model="user" label-width="80px">
                <el-form-item label="姓名" prop="desc">
                    <el-input :disabled="true"   :placeholder="this.userName" ></el-input>

                </el-form-item>

                <el-form-item label="饮食偏好" prop="desc">
                  <el-select v-model="user.dietary_prefer"  placeholder="请选择" clearable @change="(el)=>dietaryPreferSelect(el)">
                    <el-option
                        v-for="item in dp"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="性别" prop="desc">
                  <el-select v-model="user.gender"  placeholder="请选择" clearable @change="(el)=>genderSelector(el)">
                    <el-option
                        v-for="item in ge"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>


                <el-form-item>
                  <el-button type="primary" @click="onSubmit">提交资料</el-button>
                  <el-button>取消</el-button>
                </el-form-item>

              </el-form>

            </div>
          </el-card>
        </el-row>
        </div>
      </el-main>
      <el-footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
import {getCTime} from "@/utils/common";
import {dietary_prefer,gender} from "@/utils/select"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'UserPost',
  data () {
    return {
      dp:dietary_prefer,
      ge:gender,
      user:{
        username:'',
        dietary_prefer:'',
        gender:'',
        avatar:require('@/assets/logo.png')
      },
      userName:'',
      currentDate:'2024-04-28 21:30:12'
    }
    },
  created () {
    this.userName=this.$route.params.userName
    console.log('跳转的userName是: '+this.userName)
    //this.loadData()
  },
  methods: {
    onSubmit(){
      let submitData = {
        gender:this.user.gender,
        userName:this.userName,
        dietaryPrefer:this.user.dietary_prefer,
        updateTime:getCTime(),
        createTime:getCTime()
      }


      axios.post('http://localhost:4009/user/udpate', submitData).then(res => {
        console.log(res)
        if (res.data.status !== 200) {
          this.$message.error(res.data.message)
        } else {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        }
        //this.$refs.reForm1.resetFields();
        this.user.gender=''
        this.user.dietary_prefer=''

      }).catch(error => {
        console.log(error)
        this.$message.error(error)
      })


    },
    dietaryPreferSelect(e){
      this.user.dietary_prefer=e
    },
    genderSelector(e){
      this.user.gender=e
    }
  }
}
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 100vh; /* 使用100%视口高度来使容器撑满整个屏幕高度 */
}
</style>
